<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>参数列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区 -->
        <el-card>
            <!-- 搜索框 -->
            <el-input placeholder="请输入内容" v-model="seathparams.query" class="input-with-select" clearable>
                <!-- 其实这里click可以直接等于getcommodity 但是我觉得一进页面不能有提醒消息获取成功弹窗 -->
                <el-button slot="append" icon="el-icon-search" @click="searchlist"></el-button>
            </el-input>
            <!-- 按钮 -->
            <el-button type="primary" @click="addCommodity">添加商品</el-button>
            <!-- 表格 -->
            <el-table :data="commodityData" style="width: 100%" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称" min-width="800"></el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)"></el-table-column>
                <el-table-column prop="goods_weight" label="商品重量" ></el-table-column>
                <el-table-column prop="add_time" label="创建时间" min-width="150">
                    <template slot-scope="scope">
                        {{scope.row.add_time | hendle_date}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deletepro(scope.row.goods_id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- size-change	pageSize 改变时会触发	每页条数 -->
            <!-- current-change	currentPage 改变时会触发	当前页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="seathparams.pagenum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="seathparams.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                // 表格的数据源 商品列表数据
                commodityData:[],
                seathparams:{
                    query:'',
                    // 当前页码
                    pagenum:1,
                    // 每页显示条数
                    pagesize:10
                },
                // 一共几条数据
                total:0
            }
        },
        created() {
            // 页面一加载，获取商品列表
            this.getcommodity()
        },
        methods: {
            // 获取商品列表
            async getcommodity() {
                const {data: res}= await this.$http.get('goods',{
                    params:this.seathparams
                })
                // console.log(res);
                if(res.meta.status !== 200)return this.$message.error('商品列表获取失败')
                this.commodityData = res.data.goods
                this.total = res.data.total
            },
            // 每页条数
            handleSizeChange(newpages) {
                this.seathparams.pagesize = newpages
                this.getcommodity()
            },
            // 当前页
            handleCurrentChange(newcurry) {
                this.seathparams.pagenum = newcurry
                this.getcommodity()
            },
            // 查询列表
            async searchlist() {
                const {data: res} = await this.$http.get('goods',{params:this.seathparams})
                // console.log(res);
                if(res.meta.status !== 200)return this.$message.error('查询失败')
                this.$message.success('查询成功')
                this.getcommodity()
            },
            // 删除
            async deletepro(id) {
                const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).catch(err=>err)
                if(res !== 'confirm')return this.$message.info('已取消')
                const {data: str}= await this.$http.delete(`goods/${id}`)
                // console.log(str);
                if(str.meta.status !== 200)return this.$message.error('删除失败')
                this.$message.success('删除成功')
                this.getcommodity()
            },
            // 添加商品
            addCommodity() {
                this.$router.push('/goods/add')
            }

        }

    }
</script>
<style lang="less" scope>
    .input-with-select {
        width: 500px;
        margin-right: 20px;
    }
</style>